{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Sergey Pozhilov (GetTemplate.com)">

    <title>Sign in - Progressus Bootstrap template</title>

    <link rel="shortcut icon" href="{% static 'user/images/gt_favicon.png' %}">

    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="{% static 'user/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'user/css/font-awesome.min.css' %}">

    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="{% static 'user/css/bootstrap-theme.css' %}" media="screen">
    <link rel="stylesheet" href="{% static 'user/css/main.css' %}">
    <link rel="stylesheet" href="{% static 'user/plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="{% static 'user/js/html5shiv.js'%}"></script>
    <script src="{% static 'user/js/respond.min.js'%}"></script>
    <![endif]-->

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        #nav {
            height: 50px;
            background-color: #46474a;
        }

        #nav ul li {
            width: 120px;
            float: left;
        }

        #nav ul li a {
            display: block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 18px;
            /* font-weight: bold; */
            color: white;
            text-align: center;
        }

        #nav ul li a:hover {
            background-color: white;
            color: #46474a;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
    <style type="text/css">
        li.margin {
            margin-left: 50px;
        }
    </style>


</head>

<body>
<div id="nav">
    <ul>
        <li class="margin"><img src="{% static 'user/images/logo.png' %}" style="width: 87.4px;height: 50px;"></li>
        <li><a href="{% url 'purchase_index' %}">购物商城</a></li>
        <li><a href="/moment/">车友圈</a></li>
        <li><a href="/view_power/">充电规划</a></li>
        <li><a href="#">智能客服</a></li>
        <li><a href="/repair/">维修保养</a></li>
        {% if "info" in request.session.keys %}
        <li class="dropdown">
            <a href="#">
                我的</a>
            <div class="dropdown-content">
                <a href="{% url 'show_order' %}" style="color: #46474a;font-size: 17px;">购物订单</a>
                <a href="/repair/list/" style="color: #46474a;font-size: 17px;">维修订单</a>
                <a href="/infomation/" style="color: #46474a;font-size: 17px;">个人信息</a>
                <a href="/signout/" style="color: #46474a;font-size: 17px;">注销</a>
            </div>
        </li>

        {% else %}
        <li><a href="/signin/">登录 / 注册</a></li>
        {% endif %}
    </ul>
</div>

<!-- container -->
<div class="container">

    <ol class="breadcrumb">
        <li><a href="/index/">主页</a></li>
        <li class="active">注册</li>
    </ol>

    <div class="row">

        <!-- Article main content -->
        <article class="col-xs-12 maincontent">
            <header class="page-header">
                <h1 class="page-title">注册</h1>
            </header>

            <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h3 class="thin text-center">注册新账户</h3>
                        <p class="text-center text-muted">若您已有账户，点击 <a href="/signin/">登录</a>
                            您的账户。</p>
                        <hr>

                        <form method="post" novalidate>

                            {% csrf_token %}

                            {% for field in form %}
                            <div class="top-margin">
                                <label style="margin-left: 5px">{{ field.label }}</label><span
                                    class="text-danger"> *</span>
                                {{ field }}
                                <span style="color: red;">{{ field.errors.0 }}</span>
                            </div>
                            {% endfor %}
                            <br>


                            <hr>

                            <div class="row">
                                <div class="col-lg-8">
                                    <label class="checkbox">
                                        <input type="checkbox">
                                        我已阅读并同意 <a href="#">《用户协议和隐私政策》</a>
                                    </label>
                                </div>
                                <div class="col-lg-4 text-right">
                                    <button class="btn btn-primary" type="submit">注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

        </article>
        <!-- /Article -->

    </div>
</div>    <!-- /container -->


<footer id="footer" class="top-space">

    <div class="footer1">
        <div class="container">
            <div class="row">

                <div class="col-md-3 widget">
                    <h3 class="widget-title">Contact</h3>
                    <div class="widget-body">
                        <p>+234 23 9873237<br>
                            <a href="mailto:#">some.email@somewhere.com</a><br>
                            <br>
                            234 Hidden Pond Road, Ashland City, TN 37015
                        </p>
                    </div>
                </div>

                <div class="col-md-3 widget">
                    <h3 class="widget-title">Follow me</h3>
                    <div class="widget-body">
                        <p class="follow-me-icons clearfix">
                            <a href=""><i class="fa fa-twitter fa-2"></i></a>
                            <a href=""><i class="fa fa-dribbble fa-2"></i></a>
                            <a href=""><i class="fa fa-github fa-2"></i></a>
                            <a href=""><i class="fa fa-facebook fa-2"></i></a>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget">
                    <h3 class="widget-title">Text widget</h3>
                    <div class="widget-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, dolores, quibusdam
                            architecto voluptatem amet fugiat nesciunt placeat provident cumque accusamus itaque
                            voluptate modi quidem dolore optio velit hic iusto vero praesentium repellat commodi ad id
                            expedita cupiditate repellendus possimus unde?</p>
                        <p>Eius consequatur nihil quibusdam! Laborum, rerum, quis, inventore ipsa autem repellat
                            provident assumenda labore soluta minima alias temporibus facere distinctio quas adipisci
                            nam sunt explicabo officia tenetur at ea quos doloribus dolorum voluptate reprehenderit
                            architecto sint libero illo et hic.</p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>

    <div class="footer2">
        <div class="container">
            <div class="row">

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="simplenav">
                            <a href="#">Home</a> |
                            <a href="about.html">About</a> |
                            <a href="sidebar-right.html">Sidebar</a> |
                            <a href="contact.html">Contact</a> |
                            <b><a href="signup.html">Sign up</a></b>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="text-right">
                            Copyright &copy; 2014, Your name. Designed by <a href="http://gettemplate.com/"
                                                                             rel="designer">gettemplate</a>
                        </p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>
</footer>


<!-- JavaScript libs are placed at the end of the document so the pages load faster -->
<script src="{% static 'user/js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'user/plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

<script src="{% static 'user/js/headroom.min.js' %}"></script>
<script src="{% static 'user/js/jQuery.headroom.min.js' %}"></script>
<script src="{% static 'user/js/template.js' %}"></script>
</body>
</html>